<template>

<div class="bar">
    <div v-for="(item, index) in blog.list" :key="index" >
        <n-card :title="item.blog_title" class="blog-card">
            <template #cover>
                <!-- <img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"> -->
            </template>
            {{ item.blog_abstract }}
        </n-card>
    </div>
</div>

<div>
    <h1>
        测试 测试 TEST
    </h1>
</div>

</template>

<script setup>
import { reactive, ref, inject, onMounted } from 'vue';
import { epStore } from "../common/store.js";
import { storeToRefs } from "pinia";
import { NCard, NGi, NGrid } from "naive-ui"
const axios = inject("axios")

const store_data = epStore()
let { token } = storeToRefs(store_data)

const blog = reactive({
    list: ""
})

const getBlogs = async () => {
    let res_data = await axios.get(
        "/blog/"
    )
    blog.list = res_data.data.rows
}

onMounted(() => {
    getBlogs()
})

</script>

<style scoped>
.blog-card {
    width: 500px;
    height: 400px;
    background-color: rgba(0, 128, 0, 0.12);
}

.bar {
    position: absolute;
    width: 1024px;
    /* padding: 10px; */
}
</style>